<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>注册</title>
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css" />
    <script src="/libs/jquery-3.4.1.min.js"></script>
    <style>
      .center {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <h1>登录</h1>
      <form>
        <div class="form-group">
          <label for="user-input">用户名</label>
          <input
            type="text"
            class="form-control"
            id="user-input"
            placeholder="请输入用户名"
          />
        </div>
        <div class="form-group">
          <label for="pwd-input">密码</label>
          <input
            type="password"
            class="form-control"
            id="pwd-input"
            placeholder="请输入密码"
          />
        </div>
        <div class="form-group">
          <input type="checkbox" id="expires-input" /> 7天免登陆
        </div>
        <button type="submit" class="btn btn-default">登录</button>
      </form>
    </div>
    <script>
      /**
      /api/user/login
      post

      username: 'lisi'
      password: '123'
      expires: 7 代表7天 0代表会话有效
    */
      $("form").on("submit", function(e) {
        // 获取input的value
        const username = $("#user-input")
          .val()
          .trim();
        const password = $("#pwd-input")
          .val()
          .trim();
        const expires = $("#expires-input").prop("checked");
        e.preventDefault();
        $.post(
          "/api/user/login",
          {
            username,
            password,
            expires: expires ? 7 : 0
          },
          resp => {
            if (resp.code === 200) {
              alert(resp.msg + "，即将回到首页");
              window.location.href = "/";
            } else {
              alert(resp.msg + "，请重试");
            }
          }
        );
      });
    </script>
  </body>
</html>
